<template>
  <div class="search-list">
    <Header :queryKey="queryKey"></Header>
    <div class="search-main">
      <ul class="main-if">
        <li v-for="(item,index) in searchList.data"
          :key="index"
          @click="changeTab(index)">
          <div :class='searchList.currentIndex == index ? "active":""'>{{item.name}}</div>
          <div v-if="index != 0">
            <i class="iconfont icon-xiajiantou" :class='item.status == 1?"active":""'></i>
            <i class="iconfont icon-youjiantou1" :class='item.status == 2?"active":""'></i>
          </div>
        </li>
      </ul>
<!--      搜索出来的商品-->
      <div v-if="goodsList.length" class="shop-list">
        <ul>
          <li v-for="(item,index) in goodsList"
            :key="index" @click="goDetail(item.id)">
              <img :src="item.imgUrl">
            <div>
              <p class="content">{{item.content}}</p>
              <p class="price">{{item.price}} RMB</p>
              <p class="num">{{item.num}} 人付款</p>
            </div>
          </li>
        </ul>
      </div>
      <div v-else class="none">
        没有此数据  . . . >_< !
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/search/Header";
import {api1} from "@/common/api/request";
export default {
  name: "search-list",
  data(){
    return{
      goodsList:[],
      queryKey:'',
      searchList:{
        currentIndex:0,
        data:[
          // 0代表不亮 1代表上箭头亮 2代表下箭头亮
          {name:'综合', key:"id"},
          {name:'销量', status:0, key:"num"},
          {name:'价格', status:0, key:"price"}
        ]
      }
    }
  },
  components: {
    Header
  },
  computed:{
    orderBy(){
      //得到对应的对象==》 知道点的是销量还是价格？
      let obj = this.searchList.data[this.searchList.currentIndex]
      let val = obj.status == '1' ? 'asc' : 'desc'
      return {[obj.key]:val}
    }
  },
  created() {
    //接收到传入的值
    this.queryKey = this.$route.query.key || '';
    //拿到数据
    this.getData()
  },
  watch: {
    '$route' (to, from) { //监听路由是否变化
      if(to.query.key != from.query.key){
        this.queryKey = to.query.key;
        this.getData()//重新加载数据
      }
    }
  },
  methods:{
    getData(){
      api1({
        url: '/api/goods/shopList',
        params:{
          searchName:this.queryKey,
          ...this.orderBy
        }
      }).then(res => {
        this.goodsList = res
      })
    },
    changeTab(index){
      this.searchList.currentIndex = index
      //知道点击哪一类型
      let item = this.searchList.data[index]
      //取消当前所有状态==>都变成0
      this.searchList.data.forEach((v,i)=>{
        if(i!=index){
          v.status = 0
        }
      })
      //切换
      if(index == this.searchList.currentIndex){
        item.status = item.status == 1 ? 2 : 1
      }
      this.getData();
    },
    goDetail(id){
      this.$router.push({
        path:'/detail',
        query:{
          id
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.active{
  color: red;
}
Header{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
}
.main-if{
  background-color: #FFFFFF;
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  top: 48px;
  z-index: 999;
  justify-content: space-around;
  li{
    height: 38px;
    display: flex;
    align-items: center;
    div{
      display: flex;
      flex-direction: column;
    }
  }
}
.shop-list{
  ul{
    position: relative;
    left: 0;
    right: 0;
    top: 82px;
    z-index: 99;
    li{
      width: 10rem;
      height:auto;
      border: 1px solid #F7F7F7;
      display: flex;
      img{
        width: 150px;
        height: 150px;
      }
      .content{
        font-size: 16px;
      }
      .price{
        font-size: 16px;
        color: red;
        margin-top: 50px;
      }
      .num{
        font-size: 14px;
        color: #89898b;
      }
    }
  }
}
.none{
  position: fixed;
  left: 140px;
  right: 0px;
  top: 200px;
  z-index: 99;
}
</style>